<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>jQuery树结构且可拖拽排序的tree插件 - xw素材网</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/github-dark.css" media="screen">
<style type="text/css">
	html, body, ul, li { margin:0; padding:0; }
	ul, li { list-style-type:none; color:#b5e853; border:1px solid #3f3f3f; }
	ul.sTree, ul{ padding:0px; background-color:#151515; }
	ul.sTree2 li, ul#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #3f3f3f; background-color:#3f3f3f; }
	li div { padding:7px; background-color:#222; Nborder:1px solid #3f3f3f; }
	li, ul, div { border-radius: 3px; }
	.red { background-color:#ff9999; }
	.blue { background-color:#aaaaff;}
	.green { background-color:#99ff99; }
	.gree2 { background-color:#bbffbb; }
	.yellow { background-color:#ff8; }
	.brown { background-color:#c26b2b; }
	.pT20 { padding-top:20px; }
	.pV10 { padding-top:10px; padding-bottom:10px; }
	.dN { display:none; }
	.zI1000 { z-index:1000; }
	.c1 { color:#b5e853; }
	.c2 { color:#63c0f5; }
	.c3 { color: #f77720; }
	.c4 { color: #888; }
	.bgC1 { background-color:#ccc; }
	.bgC2 { background-color:#ff8; }
	.small1 { font-size:0.8em; }
	.small2 { font-size:0.7em; }
	.small3 { font-size:0.6em; }
	.tAR { text-align:right; }
	.clear { clear:both; }
	img.descPicture { display:block; width:100%; margin:0 7px 30px 0; float:left; cursor:pointer; /*transition: all 0.5s ease;*/ }
	img.descPicture.descPictureClose { width:150px; }
	#sTree2 { margin:10px auto; }
</style>
<script src="js/jquery-git1.min.js"></script>
<script src="js/jquery-sortable-lists.min.js"></script>
<script type="text/javascript">
$(function()
{
	var options = {
			placeholderCss: {'background-color': '#ff8'},
			hintCss: {'background-color':'#bbf'},
			isAllowed: function(cEl, hint, target)
			{
				if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c')
				{
					hint.css('background-color', '#ff9999');
					return false;
				}
				else
				{
					hint.css('background-color', '#99ff99');
					return true;
				}
			},
			opener: {
				 active: true,
				 close: 'images/Remove2.png',
				 open: 'images/Add2.png',
				 openerCss: {
					 'display': 'inline-block',
					 'width': '18px',
					 'height': '18px',
					 'float': 'left',
					 'margin-left': '-35px',
					 'margin-right': '5px',
					 'background-position': 'center center',
					 'background-repeat': 'no-repeat'
				 },
				 openerClass: ''
			}
		},
		sWrapper = $('#settingsWrapper');
	$('#sTree2, #sTree').sortableLists(options);
	$('#toArrBtn').on('click', function(){ console.log($('#sTree2').sortableListsToArray()); });
	$('#toHierBtn').on('click', function() { console.log($('#sTree2').sortableListsToHierarchy()); });
	$('#toStrBtn').on('click', function() { console.log($('#sTree2').sortableListsToString()); });
	$('.descPicture').on('click', function(e) { $(this).toggleClass('descPictureClose'); });
});
</script>
</head>
<body>
    <div class="container">
      	<section id="main_content">
	<ul class="sTree2 listsClass" id="sTree2">
				<li id="item_a" data-module="a">
					<div>选项 a</div>
				</li>
				<li class="sortableListsOpen" id="item_b" data-module="b">
					<div>选项 b</div>
					<ul class="">
						<li id="item_b1" data-module="b">
							<div>选项 b1</div>
						</li>
						<li id="item_b2" data-module="b">
							<div>选项 b2</div>
						</li>
						<li id="item_b3" data-module="b">
							<div>选项 b3</div>
						</li>
						<li id="item_b4" data-module="b">
							<div>选项 b4</div>
						</li>
						<li id="item_b5" data-module="b">
							<div>选项 b5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_c" data-module="c">
					<div>选项 c</div>
					<ul class="">
						<li id="item_c1" data-module="c">
							<div>选项 c1</div>
						</li>
						<li id="item_c2" data-module="c">
							<div>选项 c2</div>
						</li>
						<li id="item_c3" data-module="c">
							<div>选项 c3</div>
						</li>
						<li id="item_c4" data-module="c">
							<div>选项 c4</div>
						</li>
						<li id="item_c5" data-module="c">
							<div>选项 c5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_d" data-module="d">
					<div>选项 d</div>
					<ul class="">
						<li id="item_d1" data-module="d">
							<div>选项 d1</div>
						</li>
						<li id="item_d2" data-module="d">
							<div>选项 d2</div>
						</li>
						<li id="item_d3" data-module="d">
							<div>选项 d3</div>
						</li>
						<li id="item_d4" data-module="d">
							<div>选项 d4</div>
						</li>
						<li id="item_d5" data-module="d">
							<div>选项 d5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_e" data-module="e">
					<div>选项 e</div>
				</li>
				<li class="" id="item_f" data-module="f">
					<div>选项 f</div>
				</li>
			</ul>
      </section>
    </div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</body>
</html>
